<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>修改用户信息</title>
  <style></style>
</head>
<body>
  <label>原手机号</label>
  <input type="text" placeholder="原手机号" id="oldphone">
  <hr>
  <h4>以下为修改信息，不改的按照之前内容重新填写</h4>
  <input type="text" placeholder="新名字" id="uname"><br>
  <input type="text" placeholder="新手机号" id="uphone"><br>
  <input type="text" placeholder="写1或0" id="umember"><br>
  <button id="btn">提交修改</button>
  <script>
    //获取元素
    var uname = document.getElementById('oldphone');
    var uphone =document.getElementById('uphone');
    var umember = document.getElementById('umember');
    var btn = document.getElementById('btn');
    //点击事件，调用ajax要传4个参数
    btn.onclick=function(){
      var unameval=uname.value;
      var uphoneval=uphone.value;
      var umemberval=umember.value;
      var oldphoneval=oldphone.value;
      ajax(unameval,uphoneval,umemberval,oldphoneval);
    }
    function ajax(a,b,c,d){
      var xhr=new XMLHttpRequest();
      xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
          if(xhr.status>=200 && xhr.status<300){
            console.log(xhr.responseText)
            var result =JSON.parse(xhr.responseText);
            alert(result.msg);
          }
        }
      }
      xhr.open('put','/user/edit',true)
      xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8');
      xhr.send(`uname=${a}&uphone=${b}&umember=${c}&oldphone=${d}`);
    }
  </script>
</body>
</html>